<template>
    <div class="box-wrapper">
        <!-- <div class="title-name">
            <span>项目信息</span>
        </div> -->
        <div class="search-wrap">
            <div class="item">
                <el-input placeholder="学号"></el-input>
            </div>
            <div class="item">
                <el-input placeholder="姓名"></el-input>
            </div>
            <div class="item">
                <el-input placeholder="学籍"></el-input>
            </div>
            <!-- <div class="item">
                <el-  placeholder="年份">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el- >
            </div>
            <div class="item">
                <el-  placeholder="学期">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el- >
            </div>
            <div class="item">
                <el-  placeholder="学院">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el- >
            </div>
            <div class="item">
                <el-  placeholder="校区">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el- >
            </div>
            <div class="item">
                <el-  placeholder="是否住宿">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el- >
            </div>
            <div class="item">
                <el-  placeholder="是否需要代购生活用品">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el- >
            </div>
            <div class="item">
                <el-  placeholder="是否需要加床">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el- >
            </div> -->
            <div class="item"></div>
            <div class="item t-rig paddingT-1">
                <el-button class="btn" @click="queryClick">查询</el-button>
                <el-button class="btn" @click="resetClick">重置</el-button>
            </div>
        </div>
        <div class="query-box t-rig">
            <el-button class="btn" type="primary">导出调研数据</el-button>
        </div>
        <el-table  v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="studentID" label="学号">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="studentStatus" label="学籍">
            </el-table-column>
            <el-table-column prop="college" label="学院">
            </el-table-column>
            <el-table-column prop="campus" label="校区">
            </el-table-column>
            <el-table-column prop="zhusu" label="是否住宿">
            </el-table-column>
            <el-table-column prop="shenghuo" label="是否需要代购生活用品">
            </el-table-column>
            <el-table-column prop="jiachuang" label="是否需要加床">
            </el-table-column>
            <el-table-column prop="year" label="年度">
            </el-table-column>
            <el-table-column prop="date" label="提交时间">
            </el-table-column>
            <el-table-column prop="oprate" label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default{
    data() {
        return {
            loading: false,
            tableData: [{
                studentID: '02405021106',
                name: '王小虎',
                studentStatus:'博士研究生（普通）',
                college: '材料科学与工程学院',
                campus: '闵行',
                zhusu: '是',
                shenghuo: '否',
                jiachuang: '否',
                year: '2023',
                date: '2023-02-01'
            }, {
                studentID: '02405021101',
                name: '张三丰',
                studentStatus:'博士研究生（普通）',
                college: '材料科学与工程学院',
                campus: '闵行',
                zhusu: '是',
                shenghuo: '否',
                jiachuang: '否',
                year: '2023',
                date: '2023-02-01'
            }, {
                studentID: '02405021103',
                name: '李思',
                studentStatus:'博士研究生（普通）',
                college: '材料科学与工程学院',
                campus: '闵行',
                zhusu: '是',
                shenghuo: '否',
                jiachuang: '否',
                year: '2023',
                date: '2023-02-01'
            },{
                studentID: '02405021105',
                name: '王瑞',
                studentStatus:'博士研究生（普通）',
                college: '材料科学与工程学院',
                campus: '闵行',
                zhusu: '是',
                shenghuo: '否',
                jiachuang: '否',
                year: '2023',
                date: '2023-02-01'
            },{
                studentID: '02305021105',
                name: '王瑞',
                studentStatus:'博士研究生（普通）',
                college: '材料科学与工程学院',
                campus: '闵行',
                zhusu: '是',
                shenghuo: '否',
                jiachuang: '否',
                year: '2023',
                date: '2023-02-01'
            },{
                studentID: '02305021255',
                name: '王瑞',
                studentStatus:'博士研究生（普通）',
                college: '材料科学与工程学院',
                campus: '闵行',
                zhusu: '是',
                shenghuo: '否',
                jiachuang: '否',
                year: '2023',
                date: '2023-02-01'
            },{
                studentID: '0234521105',
                name: '一一',
                studentStatus:'博士研究生（普通）',
                college: '材料科学与工程学院',
                campus: '闵行',
                zhusu: '是',
                shenghuo: '否',
                jiachuang: '否',
                year: '2023',
                date: '2023-02-01'
            }]
        }
    },
    created() {
        
    },
    methods: {
        resetClick() {

        },
        queryClick() {

        },
        handleClick() {

        }
    }
}
</script>
<style lang="less" scoped>
.box-wrapper{
    background: #fff;
    .title-name{
        line-height: 30px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        span{
            color: #409EFF;
            display: inline-block;
            border-bottom: 2px solid #409EFF;
        }
    }
}
/deep/.search-wrap{
    margin: 20px 0;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    background: #b1cbff;
    .item{
        width: 25%;
        padding: 5px;
        .btn{
            padding: 0;
            width: 80px;
            height: 32px;
            // background: #016aed;
        }
        .el- {
            width: 100%;
        }
        .el-input{
            .el-input__inner{
                height: 32px;
            }
        }
    }
}
.query-box{
    .btn{
        padding: 0;
        width: 100px;
        height: 32px;
        background: #016aed;
    }
}
.tabHeader{
    background: #f2f2f2;
}
</style>